<template>
  <div class="home">
    <jc-title :title1="$t('market.commonly')" :division="false" />
    <ul class="funtest">
      <li v-for="item in listData" :key="item.fid" @click="pushView(item)">
        <el-image>
          <div slot="error" class="image-slot">
            <i class="el-icon-picture-outline" />
          </div>
        </el-image>
        <div>{{ item.fname }}</div>
        <!-- <span class="btm"><i class="el-icon-edit"></i></span> -->
        <span class="top" @click.stop="delTest(item.fid)"><i class="el-icon-close" /></span>
      </li>
      <li class="lastLi" @click="isClosingDialog=true">
        <el-image>
          <div slot="error" class="image-slot">
            <i class="el-icon-plus" />
          </div>
        </el-image>
      </li>
    </ul>
    <jc-title :title1="$t('menu.messageCenter')" :division="false" />
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane :label="$t('market.unread')" name="read">
        <unread table-height="500px" />
      </el-tab-pane>
      <el-tab-pane :label="$t('market.entire')" name="complete">
        <whole ref="tabWhole" table-height="500px" />
      </el-tab-pane>
    </el-tabs>
    <el-dialog
      v-dialogDrag
      title="添加常用功能"
      model
      :visible.sync="isClosingDialog"
      :close-on-click-modal="false"
      width="700px"
    >
      <navigation add @reload="querySettingAll" />
    </el-dialog>
  </div>
</template>

<script>
import unread from '@/views/mallHomepage/messageCenter/unread'
import whole from '@/views/mallHomepage/messageCenter/whole'
import jcTitle from '@/components/Title'
import { deleteCommonSetting, queryCommonSettingAll } from '@/api/message'
import navigation from '@/layout/components/navigation'

export default {
  name: 'MessageCenter',
  components: {
    navigation,
    jcTitle,
    unread,
    whole
  },
  data() {
    return {
      isClosingDialog: false,
      activeName: 'read',
      listData: []
    }
  },
  created() {
    this.querySettingAll()
  },
  methods: {
    querySettingAll() {
      queryCommonSettingAll({}).then(res => {
        if (res.code === 0) {
          this.listData = res.data
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
        }
      })
    },
    // 删除
    delTest(ev) {
      const DATA = {
        delArr: [ev]
      }
      deleteCommonSetting(DATA).then(res => {
        if (res.code === 0) {
          this.querySettingAll()
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
        }
      })
    },
    // 跳转路由
    pushView(item) {
      this.$router.push({ path: item.furl })
    },
    handleClick() {
      this.$refs.tabWhole.getUnreadData()
    }
  }
}
</script>

<style scoped lang="scss">
.home {
  padding: 10px;
  background: #fff;
  .funtest {
    margin: 0;
    padding: 10px 50px;
    list-style: none;
    display: flex;
    flex-wrap: nowrap;
    li {
      width: 100px;
      height: 120px;
      background: #f5f5f5;
      border-radius: 5px;
      margin: 0 15px;
      font-size: 12px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      position: relative;
      i {
        font-size: 64px;
        color: #5b5656;
      }
      span {
        display: none;
        position: absolute;
        top: 0;
        right: -15px;
        height: 20px;
        //background: #f5f5f5;
        i {
          font-size: 18px;
          color: #333;
        }
      }
      span:hover {
        display: block;
        color: #1e9fff;
        cursor: pointer;
      }
      .btm {
        top: 20px;
      }
    }
    li:hover {
      cursor: pointer;
      color: #1e9fff;
      span {
        display: block;
      }
    }
    .lastLi {
      i {
        font-size: 38px;
        font-weight: 600;
        color: #888787;
      }
      transition: all .5s;
    }
    .lastLi:hover {
      cursor: pointer;
      background: #f8f8f8;
      i {
        font-size: 38px;
        font-weight: 600;
        color: #1c1b1b;
      }
    }
  }
}
</style>
